<template>
  <div class="add-or-update">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="100px" v-loading="loading">
      <el-form-item label="类型代码:" prop="typeCode">
        <el-input placeholder="请输入类型代码" v-model="dataForm.typeCode">
        </el-input>
      </el-form-item>
      <el-form-item label="类型名称:" prop="typeName">
        <el-input placeholder="请输入类型名称" v-model="dataForm.typeName">
        </el-input>
      </el-form-item>
      <el-form-item label="字典代码:" prop="itemCode">
        <el-input placeholder="请输入代码" v-model="dataForm.itemCode">
        </el-input>
      </el-form-item>
      <el-form-item label="字典名称:" prop="itemName">
        <el-input placeholder="请输入名称" v-model="dataForm.itemName">
        </el-input>
      </el-form-item>
      <el-form-item label="排序码:" prop="sort">
        <el-input-number v-model="dataForm.sort" controls-position="right" :min="0"></el-input-number>
      </el-form-item>
      <el-form-item label="备注:" prop="remarks">
        <el-input type="textarea" placeholder="请输入备注" :rows=4  v-model="dataForm.remarks">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="dataFormSubmit()">提交</el-button>
        <el-button @click="resetForm('dataForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>


</template>

<script>
  export default {
    data () {
      return {
        loading: false,
        url: {
          detail: `/sysDict/query/detail`

        },
        dataForm: {
          id: '',
          itemCode: '',
          itemName: '',
          typeCode: '',
          typeName: '',
          sort: '',
          remarks: ''
        },
        dataRule: {
          typeCode: [
            { required: true, message: '类型代码不能为空', trigger: 'blur' }
          ],
          typeName: [
            { required: true, message: '类型名称不能为空', trigger: 'blur' }
          ],
          itemCode: [{
            required: true, message: '字典代码不能为空', trigger: 'blur'
          }],
          itemName: [
            { required: true, message: '字典名称不能为空', trigger: 'blur' }
          ],
          sort: [{ required: true, message: '排序码不能为空', trigger: 'blur' }]
        },
        counter: 0
      }
    },
    activated () {
      let id = this.$route.params.id || 0
      console.log('id', id)
      this.dataForm.id = id
      this.init(id)
    },
    methods: {
      // 根据是新增还是修改对表单中的字段进行处理
      init (id) {
        this.dataForm.id = id || 0
        console.log(this.dataForm.id)
        if (this.dataForm.id) {
          this.loading = true
          // 修改
          this.$http({
            url: this.$http.adornUrl(this.url.detail),
            method: 'get',
            params: this.$http.adornParams({id: id})
          }).then(({data}) => {
            this.loading = false
            this.dataForm.id = data.id
            this.dataForm.itemCode = data.itemCode
            this.dataForm.itemName = data.itemName
            this.dataForm.typeCode = data.typeCode
            this.dataForm.typeName = data.typeName
            this.dataForm.sort = data.sort
            this.dataForm.remarks = data.remarks
          })
        } else {
          // 新增时清空表单
          this.resetForm('dataForm')
        }
      },

      // 表单重置
      resetForm (formName) {
        this.$refs[formName].resetFields()
      },

      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate(valid => {
          if (valid) {
            this.loading = true
            this.$http({
              url: this.$http.adornUrl('/sysDict/save'),
              method: 'post',
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
              },
              data: this.$http.adornData(
                {
                  id: this.dataForm.id || undefined,
                  itemCode: this.dataForm.itemCode,
                  itemName: this.dataForm.itemName,
                  typeCode: this.dataForm.typeCode,
                  typeName: this.dataForm.typeName,
                  sort: this.dataForm.sort,
                  remarks: this.dataForm.remarks
                },
                false,
                'form'
              )
            })
              .then(() => {
                this.loading = false
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500  // 持续时间
                })
                this.$router.push({name: 'sys-dictionary'})
              })
          }
        })
      }
    }
  }
</script>

<style scoped >
</style>
